<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台 - 角色管理</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px 0 rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px 0 rgba(0, 0, 0, 0.08)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-all-200 {
                transition: all 0.2s ease;
            }
            .table-hover {
                @apply hover:bg-gray-100 transition-all-200;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all-200;
            }
            .btn-outline {
                @apply border border-gray-300 px-4 py-2 rounded-md hover:bg-gray-100 transition-all-200;
            }
            .btn-danger {
                @apply bg-danger text-white px-4 py-2 rounded-md hover:bg-danger/90 transition-all-200;
            }
            .input-style {
                @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-200;
            }
        }
    </style>

    <style>
        /* 基础样式重置 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F7F8FA;
        }
        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #C9CDD4;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-track {
            background-color: #F2F3F5;
        }
        /* 侧边栏固定定位（桌面端） */
        @media (min-width: 1024px) {
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 220px;
                z-index: 100;
            }
            .main-content {
                margin-left: 220px;
            }
        }
        /* 移动端适配 */
        @media (max-width: 1023px) {
            .sidebar {
                position: fixed;
                top: 0;
                left: -220px;
                height: 100vh;
                width: 220px;
                z-index: 999;
                transition: left 0.3s ease;
            }
            .sidebar.show {
                left: 0;
            }
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 998;
                display: none;
            }
            .overlay.show {
                display: block;
            }
        }
    </style>
</head>
<body>
<div id="app" class="flex h-screen overflow-hidden">
    <!-- 侧边导航栏 -->
    <div class="sidebar bg-white shadow-md flex flex-col">
        <!-- 系统Logo -->
        <div class="h-16 flex items-center justify-center border-b border-gray-200">
            <h1 class="text-primary font-bold text-xl">ShopEasy 管理系统</h1>
        </div>
        <!-- 导航菜单 -->
        <div class="flex-1 overflow-y-auto py-4">
            <ul>
                <li class="mb-1">
                    <a href="#" class="flex items-center px-4 py-3 text-gray-500 hover:bg-primary/5 hover:text-primary transition-all-200">
                        <i class="fa fa-tachometer w-6 text-center"></i>
                        <span class="ml-2">控制台首页</span>
                    </a>
                </li>
                <li class="mb-1">
                    <a href="./admin_management.html" class="flex items-center px-4 py-3 text-gray-500 hover:bg-primary/5 hover:text-primary transition-all-200">
                        <i class="fa fa-users w-6 text-center"></i>
                        <span class="ml-2">用户账号管理</span>
                    </a>
                </li>
                <li class="mb-1">
                    <a href="#" class="flex items-center px-4 py-3 bg-primary/10 text-primary font-medium transition-all-200">
                        <i class="fa fa-shield w-6 text-center"></i>
                        <span class="ml-2">角色管理</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 用户信息 -->
        <div class="p-4 border-t border-gray-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="管理员头像" class="w-8 h-8 rounded-full">
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-700">admin</p>
                    <p class="text-xs text-gray-400">管理员</p>
                </div>
                <a href="./index.html"><button class="text-gray-600 hover:text-danger transition-colors" onclick="util.logout()">
                    <span class="ml-1">退出登录</span>
                    <i class="fa fa-sign-out"></i>
                </button></a>
            </div>
        </div>
    </div>

    <!-- 移动端遮罩层 -->
    <div class="overlay" @click="toggleSidebar"></div>

    <!-- 主内容区 -->
    <div class="main-content flex flex-col overflow-hidden">
        <!-- 顶部导航栏 -->
        <header class="h-16 bg-white shadow-sm flex items-center justify-between px-6">
            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-gray-500 hover:text-primary transition-all-200" @click="toggleSidebar">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <!-- 面包屑导航（桌面端） -->
            <div class="hidden md:flex items-center text-sm text-gray-500">
                <a href="/index.html" class="hover:text-primary transition-all-200">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-gray-700">角色管理</span>
            </div>
            <!-- 右侧功能按钮 -->
            <div class="flex items-center space-x-4">
                <button class="text-gray-500 hover:text-primary transition-all-200 relative">
                    <i class="fa fa-bell text-xl"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                <button class="text-gray-500 hover:text-primary transition-all-200">
                    <i class="fa fa-question-circle text-xl"></i>
                </button>
            </div>
        </header>

        <!-- 内容区域 -->
        <main class="flex-1 overflow-y-auto p-6">
            <!-- 页面标题与操作按钮 -->
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                <div>
                    <h2 class="text-[clamp(1.25rem,3vw,1.5rem)] font-bold text-gray-700">角色管理</h2>
                    <p class="text-sm text-gray-400 mt-1">管理系统角色及权限分配</p>
                </div>
                <button class="btn-primary mt-4 md:mt-0 flex items-center" @click="showAddRoleModal">
                    <i class="fa fa-plus mr-2"></i>
                    <span>新增角色</span>
                </button>
            </div>

            <!-- 搜索与筛选栏 -->
            <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- 角色名称搜索 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">角色名称:</label>
                        <div class="relative">
                            <input
                                    type="text"
                                    v-model="searchForm.roleName"
                                    placeholder="请输入角色名称"
                                    class="input-style pl-5 w-full"
                            >
                        </div>
                    </div>
                    <!-- 角色标识搜索 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">角色标识:</label>
                        <div class="relative">
                            <input
                                    type="text"
                                    v-model="searchForm.roleKey"
                                    placeholder="请输入角色标识"
                                    class="input-style pl-5 w-full"
                            >
                        </div>
                    </div>
                </div>
                <!-- 搜索按钮 -->
                <div class="flex justify-end mt-4 space-x-3">
                    <button class="btn-outline" @click="resetSearch">
                        <i class="fa fa-refresh mr-1"></i> 重置
                    </button>
                    <button class="btn-primary" @click="filterRoleList">
                        <i class="fa fa-search mr-1"></i> 搜索
                    </button>
                </div>
            </div>

            <!-- 角色列表 -->
            <div class="bg-white rounded-lg shadow-card overflow-hidden">
                <!-- 列表操作栏 -->
                <div class="p-4 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex items-center">
                        <input
                                type="checkbox"
                                v-model="selectAll"
                                class="h-4 w-4 text-primary border-gray-300 rounded"
                                @change="handleSelectAll"
                        >
                        <label class="ml-2 text-sm text-gray-700">全选</label>
                        <span class="ml-3 text-sm text-gray-500">已选 {{ selectedRoleIds.length }} 项</span>
                    </div>
                    <!-- 批量操作按钮（仅选中时显示） -->
                    <div class="flex space-x-3 mt-3 sm:mt-0" v-if="selectedRoleIds.length > 0">
                        <button class="btn-danger" @click="batchDelete">
                            <i class="fa fa-trash mr-1"></i> 批量删除
                        </button>
                    </div>
                </div>

                <!-- 表格 -->
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                        <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <th class="px-6 py-3 w-12">
                                <input
                                        type="checkbox"
                                        v-model="selectAll"
                                        class="h-4 w-4 text-primary border-gray-300 rounded"
                                        @change="handleSelectAll"
                                >
                            </th>
                            <th class="px-6 py-3">角色ID</th>
                            <th class="px-6 py-3">角色名称</th>
                            <th class="px-6 py-3">角色标识</th>
                            <th class="px-6 py-3">创建时间</th>
                            <th class="px-6 py-3">操作</th>
                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                        <!-- 数据行 - 静态数据 -->
                        <tr class="table-hover" v-for="role in paginatedRoleList" :key="role.roleId">
                            <td class="px-6 py-4">
                                <input
                                        type="checkbox"
                                        :value="role.roleId"
                                        v-model="selectedRoleIds"
                                        class="h-4 w-4 text-primary border-gray-300 rounded"
                                        :disabled="role.isDefault"
                                >
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-700">{{ role.roleId }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <span class="text-sm font-medium text-gray-700">{{ role.roleName }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">{{ role.roleKey }}</td>
                            <td class="px-6 py-4 text-sm text-gray-500">{{ formatTime(role.createTime) }}</td>
                            <td class="px-6 py-4 text-right text-sm font-medium">
                                <button
                                        class="text-primary hover:text-primary/80 mr-4 transition-all-200"
                                        @click="showEditRoleModal(role)"
                                >
                                    编辑
                                </button>
                                <button
                                        class="text-danger hover:text-danger/80 transition-all-200"
                                        @click="handleDeleteRole(role.roleId)"
                                        :disabled="role.isDefault"
                                        :title="role.isDefault ? '默认角色不能删除' : ''"
                                >
                                    删除
                                </button>
                            </td>
                        </tr>
                        <!-- 空数据提示 -->
                        <tr v-if="paginatedRoleList.length === 0">
                            <td colspan="6" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center">
                                    <img src="https://picsum.photos/120/120?empty=1" alt="暂无数据" class="w-24 h-24 mb-4 opacity-50">
                                    <p class="text-gray-500">暂无匹配的角色数据</p>
                                    <button class="mt-4 btn-outline" @click="resetSearch">
                                        <i class="fa fa-refresh mr-1"></i> 重置搜索
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页控件 -->
                <div class="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between">
                    <div class="text-sm text-gray-500 mb-4 sm:mb-0">
                        显示 {{ (currentPage - 1) * pageSize + 1 }} 到 {{ Math.min(currentPage * pageSize, filteredRoleList.length) }} 条，共 {{ filteredRoleList.length }} 条
                    </div>
                    <div class="flex items-center space-x-2">
                        <button
                                class="btn-outline px-3 py-1 text-sm"
                                :disabled="currentPage === 1"
                                @click="currentPage--"
                        >
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button
                                v-for="page in pageRange"
                                :key="page"
                                class="w-8 h-8 flex items-center justify-center rounded-md text-sm"
                                :class="currentPage === page ? 'bg-primary text-white' : 'border border-gray-300 text-gray-700 hover:bg-gray-100'"
                                @click="currentPage = page"
                        >
                            {{ page }}
                        </button>
                        <button
                                class="btn-outline px-3 py-1 text-sm"
                                :disabled="currentPage === totalPages"
                                @click="currentPage++"
                        >
                            <i class="fa fa-angle-right"></i>
                        </button>
                        <div class="flex items-center ml-4">
                            <span class="text-sm text-gray-500 mr-2">每页显示：</span>
                            <select
                                    v-model="pageSize"
                                    class="input-style w-20 text-sm px-2 py-1"
                                    @change="handlePageSizeChange"
                            >
                                <option value="10">10条</option>
                                <option value="20">20条</option>
                                <option value="50">50条</option>
                                <option value="100">100条</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 新增角色弹窗 -->
    <div class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center z-50" v-if="showAddModal">
        <div class="absolute inset-0 bg-black/50" @click="closeAddModal"></div>
        <div class="relative bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
            <div class="p-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="font-bold text-lg text-gray-700">新增角色</h3>
                <button class="text-gray-400 hover:text-gray-700 transition-all-200" @click="closeAddModal">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form class="p-6 space-y-4" @submit.prevent="handleAddRole">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色名称 <span class="text-danger">*</span></label>
                    <input
                            type="text"
                            v-model="addRoleForm.roleName"
                            placeholder="请输入角色名称"
                            class="input-style w-full"
                            required
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色标识 <span class="text-danger">*</span></label>
                    <input
                            type="text"
                            v-model="addRoleForm.roleKey"
                            placeholder="请输入角色标识（英文/数字）"
                            class="input-style w-full"
                            required
                    >
                </div>
                <div>
                    <label class="flex items-center">
                        <input
                                type="checkbox"
                                v-model="addRoleForm.isDefault"
                                class="h-4 w-4 text-primary border-gray-300 rounded"
                        >
                        <span class="ml-2 text-sm text-gray-700">设为默认角色</span>
                    </label>
                </div>

                <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
                    <button type="button" class="btn-outline" @click="closeAddModal">取消</button>
                    <button type="submit" class="btn-primary">确认新增</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑角色弹窗 -->
    <div class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center z-50" v-if="showEditModal">
        <!-- 关键修复：添加 .stop 阻止事件冒泡 -->
        <div class="absolute inset-0 bg-black/50" @click.stop="closeEditModal"></div>
        <div class="relative bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
            <div class="p-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="font-bold text-lg text-gray-700">编辑角色 - {{ editRoleForm.roleName }}</h3>
                <button class="text-gray-400 hover:text-gray-700 transition-all-200" @click="closeEditModal">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form class="p-6 space-y-4" @submit.prevent="handleEditRole">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色ID</label>
                    <input
                            type="text"
                            v-model="editRoleForm.roleId"
                            class="input-style w-full bg-gray-50"
                            disabled
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色名称 <span class="text-danger">*</span></label>
                    <input
                            type="text"
                            v-model="editRoleForm.roleName"
                            placeholder="请输入角色名称"
                            class="input-style w-full"
                            required
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色标识 <span class="text-danger">*</span></label>
                    <input
                            type="text"
                            v-model="editRoleForm.roleKey"
                            placeholder="请输入角色标识（英文/数字）"
                            class="input-style w-full"
                            required
                    >
                </div>
                <div>
                    <label class="flex items-center">
                        <input
                                type="checkbox"
                                v-model="editRoleForm.isDefault"
                                class="h-4 w-4 text-primary border-gray-300 rounded"
                                :disabled="editRoleForm.isSystem"
                        >
                        <span class="ml-2 text-sm text-gray-700">设为默认角色</span>
                        <span v-if="editRoleForm.isSystem" class="ml-2 text-xs text-gray-500">(系统角色不可修改默认状态)</span>
                    </label>
                </div>

                <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
                    <button type="button" class="btn-outline" @click="closeEditModal">取消</button>
                    <button type="submit" class="btn-primary">确认修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>


    // 关键修复：等待DOM完全加载后再初始化Vue，避免变量冲突
    document.addEventListener('DOMContentLoaded', function() {
        new Vue({
            el: '#app',
            data() {
                return {
                    sidebarShow: false,
                    searchForm: { roleName: '', roleKey: '' },
                    roleList: [
                        { roleId: 1, roleName: '管理员', roleKey: 'admin', createTime: new Date('2023-01-15').getTime(), isDefault: false, isSystem: true },
                        { roleId: 2, roleName: '商家', roleKey: 'merchant', createTime: new Date('2023-02-20').getTime(), isDefault: false, isSystem: false },
                        { roleId: 3, roleName: '普通用户', roleKey: 'user', createTime: new Date('2023-01-10').getTime(), isDefault: true, isSystem: true }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    selectedRoleIds: [],
                    selectAll: false,
                    showAddModal: false,
                    showEditModal: false, // 确保默认是false
                    addRoleForm: { roleName: '', roleKey: '', isDefault: false },
                    editRoleForm: { roleId: '', roleName: '', roleKey: '', isDefault: false, isSystem: false }
                }
            },
            computed: {
                filteredRoleList() {
                    return this.roleList.filter(role => {
                        const matchesName = !this.searchForm.roleName || role.roleName.includes(this.searchForm.roleName);
                        const matchesKey = !this.searchForm.roleKey || role.roleKey.includes(this.searchForm.roleKey);
                        return matchesName && matchesKey;
                    });
                },
                paginatedRoleList() {
                    const startIndex = (this.currentPage - 1) * this.pageSize;
                    return this.filteredRoleList.slice(startIndex, startIndex + this.pageSize);
                },
                totalPages() {
                    return Math.ceil(this.filteredRoleList.length / this.pageSize) || 1;
                },
                pageRange() {
                    const range = [];
                    const total = this.totalPages;
                    let start = Math.max(1, this.currentPage - 2);
                    let end = Math.min(total, start + 4);
                    if (end - start < 4) start = Math.max(1, end - 4);
                    for (let i = start; i <= end; i++) range.push(i);
                    return range;
                }
            },
            mounted() {
                this.filterRoleList();
                window.addEventListener('resize', this.handleResize);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.handleResize);
            },
            methods: {
                toggleSidebar() {
                    this.sidebarShow = !this.sidebarShow;
                    const sidebar = document.querySelector('.sidebar');
                    const overlay = document.querySelector('.overlay');
                    if (this.sidebarShow) {
                        sidebar.classList.add('show');
                        overlay.classList.add('show');
                        document.body.style.overflow = 'hidden';
                    } else {
                        sidebar.classList.remove('show');
                        overlay.classList.remove('show');
                        document.body.style.overflow = '';
                    }
                },
                handleResize() {
                    const isMobile = window.innerWidth <= 1023;
                    const sidebar = document.querySelector('.sidebar');
                    const overlay = document.querySelector('.overlay');
                    if (!isMobile) {
                        this.sidebarShow = false;
                        sidebar.classList.remove('show');
                        overlay.classList.remove('show');
                        document.body.style.overflow = '';
                    }
                },
                formatTime(time) {
                    if (!time) return '-';
                    const date = new Date(time);
                    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
                },
                filterRoleList() {
                    this.currentPage = 1;
                },
                resetSearch() {
                    this.searchForm = { roleName: '', roleKey: '' };
                    this.currentPage = 1;
                    this.filterRoleList();
                },
                handlePageSizeChange() {
                    this.currentPage = 1;
                },
                handleSelectAll() {
                    if (this.selectAll) {
                        this.selectedRoleIds = this.filteredRoleList.filter(role => !role.isDefault).map(role => role.roleId);
                    } else {
                        this.selectedRoleIds = [];
                    }
                },
                batchDelete() {
                    if (this.selectedRoleIds.length === 0) return;
                    if (confirm(`确定要删除选中的${this.selectedRoleIds.length}个角色吗？此操作不可恢复！`)) {
                        alert(`已删除选中的${this.selectedRoleIds.length}个角色（静态演示）`);
                        this.selectedRoleIds = [];
                        this.selectAll = false;
                    }
                },
                handleDeleteRole(roleId) {
                    const role = this.roleList.find(r => r.roleId === roleId);
                    if (role && role.isDefault) {
                        alert('默认角色不能删除');
                        return;
                    }
                    if (confirm('确定要删除此角色吗？此操作不可恢复！')) {
                        alert(`已删除角色ID: ${roleId}（静态演示）`);
                        this.selectedRoleIds = [];
                        this.selectAll = false;
                    }
                },
                showAddRoleModal() {
                    this.addRoleForm = { roleName: '', roleKey: '', isDefault: false };
                    this.showAddModal = true;
                },
                closeAddModal() {
                    this.showAddModal = false;
                    this.$forceUpdate(); // 强制刷新视图
                },
                handleAddRole() {
                    alert(`已新增角色：${this.addRoleForm.roleName}（静态演示）`);
                    this.closeAddModal();
                },
                showEditRoleModal(role) {
                    this.editRoleForm = JSON.parse(JSON.stringify(role));
                    this.showEditModal = true;
                },
                // 关键修复：添加强制刷新，确保状态同步
                closeEditModal() {
                    this.showEditModal = false;
                    this.$forceUpdate(); // 强制Vue刷新视图，避免状态未同步
                },
                handleEditRole() {
                    alert(`已更新角色：${this.editRoleForm.roleName}（静态演示）`);
                    this.closeEditModal();
                }
            },
            watch: {
                filteredRoleList() {
                    const selectableRoles = this.filteredRoleList.filter(role => !role.isDefault);
                    this.selectAll = selectableRoles.length > 0 && this.selectedRoleIds.length === selectableRoles.length;
                },
                selectedRoleIds() {
                    const selectableRoles = this.filteredRoleList.filter(role => !role.isDefault);
                    this.selectAll = selectableRoles.length > 0 && this.selectedRoleIds.length === selectableRoles.length;
                }
            }
        });
    });
</script>
</body>
</html>